<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#F1F1F1" :fullscreen="true">
		<cl-sticky>
			<cl-topbar
				:border="false"
				background-color="#0C81F7"
				color="#fff"
				:title="t('invoice.detail_title')"
				:moreTit="t('invoice.edit')"
				@more="tapEdit"
			/>
		</cl-sticky>
		<view class="page-invoice animate__animated animate__fadeIn">
			<view class="list">
				<view class="li">
					<view class="name overflow1"> {{ $t("invoice.companyName") }}</view>
					<view class="flex flex-between align-center">
						<view class="text"> {{ $t("invoice.duty") }}：91110108569454891U</view>
					</view>
					<view class="info" :style="show ? 'max-height:800rpx' : 'max-height:0rpx'">
						<view class="item flex flex-between align-center">
							<view class="left">{{ $t("invoice.company_address") }}</view>
							<view class="right overflow2">{{ $t("data.data2") }}</view>
						</view>
						<view class="item flex flex-between align-center">
							<view class="left">{{ $t("invoice.tel_phone") }}</view>
							<view class="right">66418686</view>
						</view>
						<view class="item flex flex-between align-center">
							<view class="left">{{ $t("invoice.bank") }}</view>
							<view class="right overflow1">{{ $t("invoice.bank") }}</view>
						</view>
						<view class="item flex flex-between align-center">
							<view class="left">{{ $t("invoice.bank_account") }}</view>
							<view class="right">11011992906901</view>
						</view>
						<view class="item flex flex-between align-center">
							<view class="left">{{ $t("invoice.phone") }}</view>
							<view class="right">131****0435</view>
						</view>
						<view class="item flex flex-between align-center">
							<view class="left">{{ $t("invoice.email") }}</view>
							<view class="right overflow1">gen***@infohold.com.cn</view>
						</view>
					</view>
					<view @click="show = !show" class="flex flex-center align-center btn"
						><cl-icon
							class="mr10"
							:name="show ? 'arrow-top' : 'arrow-bottom'"
						></cl-icon>
						{{ show ? $t("invoice.hide") : $t("invoice.show") }}</view
					>
					<image src="/static/images/qrcode.jpg" mode="aspectFill" class="qrcode"></image>
					<view class="alert">{{ $t("invoice.alert") }}</view>
				</view>
				<view class="border"></view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user } = useStore();
const ui = useUi();
const app = useApp();
const show = ref(false);
const tapEdit = () => {
	router.push("/pages/invoice/add?id=1");
};
</script>

<style lang="scss" scoped>
.page-invoice {
	padding: 30rpx 20rpx;
	.list {
		.border {
			width: 100%;
			height: 20rpx;
			background-image: url("/static/images/bolang.png");
			background-size: 110% 100%;
			background-position: center center;
		}
		.li {
			width: 710rpx;
			background: #ffffff;
			box-shadow: 0px 10px 20rpx 0px rgba(170, 170, 170, 0.1);
			border-radius: 20rpx 20rpx 0px 0px;
			padding: 40rpx;
			box-sizing: border-box;
			position: relative;
			&::before {
				content: "";
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				background-color: #f1f1f1;
				position: absolute;
				top: 94rpx;
				left: -18rpx;
			}
			&::after {
				content: "";
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				background-color: #f1f1f1;
				position: absolute;
				top: 94rpx;
				right: -18rpx;
			}

			.name {
				width: 100%;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 38rpx;
				color: #333333;
				border-bottom: 2rpx dashed #ddd;
				padding-bottom: 20rpx;
			}
			.text {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #666666;
				padding: 30rpx 0;
			}
			.info {
				overflow: hidden;
				transition: all 0.5s ease;
				.item {
					margin-bottom: 40rpx;
				}
				.left {
					width: 130rpx;
					margin-right: 30rpx;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
				}
				.right {
					flex: 1;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}
			}
			.btn {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 50rpx;
				// margin-top: 50rpx;
			}
			.qrcode {
				width: 420rpx;
				height: 420rpx;
				background: #ffffff;
				border: 10px solid #f1f1f1;
				display: block;
				margin: 40rpx auto 30rpx;
			}
			.alert {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				text-align: center;
			}
		}
	}
}
</style>
